本文共 8983 字,大约阅读时间需要 29 分钟。
目录
以前我们是这样的:
以后将会是这样的:
传统方式实现加法运算
Angular实现加法运算
传统方式实现数据列表呈现
Angular实现数据列表呈现
bash bower install angular
bash npm install angular
Hello world
第一个AngularJS示例 在输入框中尝试输入:
姓名:
{
{name}}
Angular Hello world 使用NG实现双边数据绑定
hello { {user.name}}
什么是 MVC 思想
视图用于展现数据
AngularJS很重要的一个特性就是实现模块化编程,我们可以通过以下方式创建一个模块,对页面进行功能业务上的划分
// 创建一个名字叫MyApp的模块,第二个参数指的是该模块依赖那些模块var myApp = angular.module("MyApp", []);
Angular 模块 使用NG实现双边数据绑定
hello { {user.name}}
调度逻辑的集合
angular.module('OneApp', []) .controller('HelloController', [ '$scope', function($scope) { $scope.p = { name: 'zhangsan' }; } ]);
// 监视购物车内容变化,计算最新结果$scope.$watch(‘totalCart’, calculateDiscount);
Angular Controller
用户名 | |
密码 | |
{ {message}} |
Angular 表达式 { { true ? 'true':'false' }}
•模型变化过后,自动同步到界面上;
•一般纯展示型的数据会用到单项数据绑定;
•使用表达式的方式都是单向的
•两个方向的数据自动同步:
•模型发生变化自动同步到视图上;
•视图上的数据发生变化过后自动同步到模型上;
ng-app 指令
ng-app 指令
ng-bind 指令
ng-bind-html 指令
ng-repeat 指令
ng-repeat 指令
ng-repeat 指令
ng-repeat 指令
ng-class 指令 aaaaaaaaaaaaaaloading...
ng-cloak 指令 { {'hello angular'}}
ng-src 跳转到图片
ng-switch 指令 你选择的是1你选择的是2你选择的是3你什么都没选
ng-xxx 其他指令 全选/取消全选
myModule.directive('hello', function() { return { restrict: 'E', template: 'Hello world
', replace: true };});myApp.directive("ngHover", function() { return function(scope, element, attrs) { element.bind("mouseenter", function() { element.css("background", "yellow"); }); element.bind("mouseleave", function() { element.css("background", "none"); }); }});
Document
Document
封装一个面包屑导航
Template • TodoMVC todos
<--!app.js-->(function(angular) { 'use strict'; /** * MyTodoMvc Module * * 应用程序的主要的模块 */ var myApp = angular.module('MyTodoMvc', []); // 注册一个主要的控制器 myApp.controller('MainController', ['$scope', function($scope) { // [1,2,3,4,5] function getId() { var id = Math.random(); // 1 2 for (var i = 0; i < $scope.todos.length; i++) { if ($scope.todos[i].id === id) { id = getId(); break; } } return id; } // 文本框需要一个模型 $scope.text = ''; // 任务列表也需要一个 // 每一个任务的结构 { id: 1, text: '学习', completed: true } $scope.todos = [{ id: 0.123, text: '学习', completed: false }, { id: 0.22, text: '睡觉', completed: false }, { id: 0.232, text: '打豆豆', completed: true }, ]; // 添加todo $scope.add = function() { if(!$scope.text){ return; } $scope.todos.push({ // 自动增长? id: getId(), // 由于$scope.text是双向绑定的,add同时肯定可以同他拿到界面上的输入 text: $scope.text, completed: false }); // 清空文本框 $scope.text = ''; }; // 处理删除 $scope.remove = function(id) { // 删除谁 for (var i = 0; i < $scope.todos.length; i++) { if ($scope.todos[i].id === id) { $scope.todos.splice(i, 1); break; } } // $scope.todos }; // 清空已完成 $scope.clear = function() { var result = []; for (var i = 0; i < $scope.todos.length; i++) { if (!$scope.todos[i].completed) { result.push($scope.todos[i]); } } $scope.todos = result; }; // 是否有已经完成的 $scope.existCompleted = function() { // 该函数一定要有返回值 for (var i = 0; i < $scope.todos.length; i++) { if ($scope.todos[i].completed) { return true; } } return false; }; // 当前编辑哪个元素 $scope.currentEditingId = -1; $scope.editing = function(id) { $scope.currentEditingId = id; }; $scope.save = function() { $scope.currentEditingId = -1; }; // $scope.checkall = false; // $scope.$watch('checkall', function(now, old) { // for (var i = 0; i < $scope.todos.length; i++) { // $scope.todos[i].completed = now; // } // }); var now = true; $scope.toggleAll = function() { for (var i = 0; i < $scope.todos.length; i++) { $scope.todos[i].completed = now; } now = !now; } }]);})(angular);